<template>
  <el-drawer
    v-model="visible"
    :title="title"
    direction="rtl"
    size="800px"
    :destroy-on-close="true"
  >
    <div v-loading="detailLoading">
      <!-- 假期取消申请信息 -->
      <el-card class="mb-4" header="假期取消申请信息">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="申请人" :label-width="140">
            {{ detailData.userName }}
          </el-descriptions-item>
          <el-descriptions-item label="部门" :label-width="140">
            {{ detailData.deptName }}
          </el-descriptions-item>
          <el-descriptions-item label="原请假申请ID" :label-width="140">
            {{ detailData.originalLeaveId }}
          </el-descriptions-item>
          <el-descriptions-item label="请假类型" :label-width="140">
            <dict-tag :type="DICT_TYPE.BPM_OA_LEAVE_TYPE" :value="detailData.leaveType ?? '' " />
          </el-descriptions-item>
          <el-descriptions-item label="取消原因" :label-width="140" :span="2">
            {{ detailData.cancelReason }}
          </el-descriptions-item>
          <el-descriptions-item label="审批结果" :label-width="140">
            <dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS" :value="detailData.status ?? '' " />
          </el-descriptions-item>
          <el-descriptions-item label="申请时间" :label-width="140">
            {{ formatDate(detailData.createTime, 'YYYY-MM-DD HH:mm:ss') }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 原请假申请信息 -->
      <el-card header="原请假申请信息" v-loading="leaveApplyLoading">
        <div v-if="leaveApplyData">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="请假类型" :label-width="140">
              <dict-tag :type="DICT_TYPE.BPM_OA_LEAVE_TYPE" :value="leaveApplyData.type ?? '' " />
            </el-descriptions-item>
            <el-descriptions-item label="请假原因" :label-width="140">
              {{ leaveApplyData.reason }}
            </el-descriptions-item>
            <el-descriptions-item label="开始时间" :label-width="140">
              {{ formatDate(leaveApplyData.startTime, 'YYYY-MM-DD') }}
              <el-tag type="success" v-if="leaveApplyData.startType === 1" class="ml-2">上午</el-tag>
              <el-tag type="primary" v-else-if="leaveApplyData.startType === 2" class="ml-2">下午</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="结束时间" :label-width="140">
              {{ formatDate(leaveApplyData.endTime, 'YYYY-MM-DD') }}
              <el-tag type="success" v-if="leaveApplyData.endType === 1" class="ml-2">上午</el-tag>
              <el-tag type="primary" v-else-if="leaveApplyData.endType === 2" class="ml-2">下午</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="申请时长" :label-width="140">
              <span v-if="leaveApplyData.day > 0">{{ leaveApplyData.day }} 天</span>  
              <span v-if="leaveApplyData.hours > 0">{{ leaveApplyData.hours }} 小时</span>
            </el-descriptions-item>
            <el-descriptions-item label="审批结果" :label-width="140">
              <dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS" :value="leaveApplyData.status ?? '' " />
            </el-descriptions-item>
            <el-descriptions-item label="申请时间" :label-width="140">
              {{ formatDate(leaveApplyData.createTime, 'YYYY-MM-DD HH:mm:ss') }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <div v-else-if="!leaveApplyLoading" style="text-align: center; color: #909399; padding: 20px 0;">
          未找到原请假申请信息
        </div>
      </el-card>
    </div>
  </el-drawer>
</template>

<script lang="ts" setup>
import { DICT_TYPE } from '@/utils/dict'
import { formatDate } from '@/utils/formatTime'
import { propTypes } from '@/utils/propTypes'
import { LeaveCancelApi, LeaveCancelVO } from '@/api/oa/leavecancel'
import { LeaveApplyApi, LeaveApplyVO } from '@/api/oa/leaveapply'

defineOptions({ name: 'LeaveCancelDetailDrawer' })

const props = defineProps({
  modelValue: propTypes.bool.def(false),
  taskId: propTypes.number.def(undefined),
  title: propTypes.string.def('详情')
})

const emit = defineEmits(['update:modelValue'])

const visible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
})

const detailLoading = ref(false) // 表单的加载中
const detailData = ref<any>({}) // 详情数据

// 原请假申请相关变量
const leaveApplyLoading = ref(false) // 原请假申请加载状态
const leaveApplyData = ref<LeaveApplyVO | null>(null) // 原请假申请数据

/** 获得数据 */
const getInfo = async () => {
  if (!props.taskId) return
  detailLoading.value = true
  try {
    detailData.value = await LeaveCancelApi.getLeaveCancel(props.taskId)
    // 获取到取消申请数据后，查询原请假申请信息
    if (detailData.value.originalLeaveId) {
      await getLeaveApplyInfo(detailData.value.originalLeaveId)
    }
  } finally {
    detailLoading.value = false
  }
}

/** 获得原请假申请数据 */
const getLeaveApplyInfo = async (originalLeaveId: number) => {
  leaveApplyLoading.value = true
  try {
    leaveApplyData.value = await LeaveApplyApi.getLeaveApply(originalLeaveId)
  } catch (error) {
    console.error('获取原请假申请信息失败:', error)
    leaveApplyData.value = null
  } finally {
    leaveApplyLoading.value = false
  }
}

defineExpose({ open: getInfo }) // 提供 open 方法，用于打开弹窗

/** 监听弹窗显示状态 */
watch(
  () => visible.value,
  (val) => {
    if (val) {
      getInfo()
    }
  }
)
</script> 